import React, { useEffect } from 'react';
//import './MapComponent.css';

const MapComponent = () => {
    useEffect(() => {
        const script = document.createElement('script');
        script.src = "https://map.qq.com/api/gljs?v=1.exp&key=T6SBZ-MEV6W-GYRRK-YLB4N-GHWY5-5OFXU";
        script.charset = "utf-8";
        script.onload = () => {
            if (window.TMap) {
                initMap();
            }
        };
        document.body.appendChild(script);

        return () => {
            document.body.removeChild(script);
        };
    }, []);

    const initMap = () => {
        const map = new window.TMap.Map('mapContainer', {
            center: new window.TMap.LatLng(40.040452, 116.273486),
            zoom: 16
        });

        const polylineLayer = new window.TMap.MultiPolyline({
            id: 'polyline-layer',
            map: map,
            styles: {
                'style_blue': new window.TMap.PolylineStyle({
                    'color': '#3777FF',
                    'width': 6,
                    'borderWidth': 5,
                    'borderColor': '#FFF',
                    'lineCap': 'butt'
                }),
                'style_red': new window.TMap.PolylineStyle({
                    'color': '#CC0000',
                    'width': 6,
                    'borderWidth': 5,
                    'borderColor': '#CCC',
                    'lineCap': 'round'
                })
            },
            geometries: [
                {
                    'id': 'pl_1',
                    'styleId': 'style_blue',
                    'paths': [new window.TMap.LatLng(40.038540, 116.272389), new window.TMap.LatLng(40.038844, 116.275210), new window.TMap.LatLng(40.041407, 116.274738)]
                },
                {
                    'id': 'pl_2',
                    'styleId': 'style_red',
                    'paths': [new window.TMap.LatLng(40.039492, 116.271893), new window.TMap.LatLng(40.041562, 116.271421), new window.TMap.LatLng(40.041957, 116.274211)]
                }
            ]
        });

        var markerArr = [{
            "id": "marker1",
            "styleId": 'marker',
            "position": new window.TMap.LatLng(40.038844, 116.275210),
            "decoration": "2",
            "stroke": "1",
            "properties": {
                "title": "marker1",
                "stroke": "1",
            }
        }, {
            "id": "marker2",
            "styleId": 'marker',
            "position": new window.TMap.LatLng(40.041407, 116.274738),
            "properties": {
                "title": "marker2",

            }
        }, {
            "id": "marker3",
            "styleId": 'marker',
            "position": new window.TMap.LatLng(40.041562, 116.271421),
            "content": "12",
            "markerAnimation": 'BOUNCE',
            "properties": {
                "title": "marker3",
            }
        }

        ];

        //初始化marker
        var marker = new window.TMap.MultiMarker({
            id: 'marker-layer',
            map: map,
            styles: {
                "marker": new window.TMap.MarkerStyle({
                    "width": 25,
                    "height": 35,
                    "anchor": { x: 16, y: 32 },
                    "src": 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerDefault.png',
                    "offset": { x: 0, y: -3 },

                })
            },

            geometries: markerArr
        });
    };

    return (
        <div id="mapContainer"></div>
    );
};

export default MapComponent;
